<template>
  <div id="home">

    <!--  用户总数  日活跃量     -->

    <el-row :gutter="10" style="margin-bottom: 40px">

      <el-col :span="6">
        <div @click="toUser">
          <el-card style="color: #409EFF">
            <div><i class="el-icon-user-solid"/>用户总数</div>
            <div style="padding: 10px 0; text-align: center;font-weight: bold;">
              {{ totalUsers }}
            </div>
          </el-card>
        </div>

      </el-col>


      <el-col :span="6">
        <el-card style="color: #E6A23C">
          <div><i class="el-icon-user"/> 活跃用户量</div>
          <div style="padding: 10px 0; text-align: center;font-weight: bold">
            {{ activeUsers }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A">
          <div><i class="el-icon-magic-stick"/>热度</div>
          <div style="padding: 10px 0; text-align: center;font-weight: bold">
            {{ dailyActivity }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C">
          <div><i class="el-icon-monitor"/>今日热点视频</div>
          <div style="padding: 10px 0; text-align: center;font-weight: bold">
            {{ hotVideo }}
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
<!--折线柱状图-->
      <el-col :span="12">
        <div id="main" style="width: 700px; height: 450px"></div>
      </el-col>

      <!--饼状图-->
      <el-col :span="12">
        <div id="pie" style="width: 700px; height: 450px"></div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Home",
  data() {
    return {
      totalUsers: '',//用户总数
      activeUsers: 10,//活跃用户量
      dailyActivity: '',//日活跃量
      hotVideo: ''//今日热点视频
    }
  },
  methods: {
    toUser() {
      this.$router.push('/user');
    }
  },
  mounted() {//页面中的元素渲染之后才会触发这里

    /*
    * 折线图
    * */
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      title: {
        text: '本年度每月新增人数预览',
        subtext: '',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line',
          lineStyle:{
            color: "rgb(84,112,198)"
          }
        },
        {
          data: [],
          type: 'bar',
          itemStyle: {
            normal: {
              //这里是重点
              color: "rgb(145,204,117)"
            }
          }
        }
      ]
    };
    //发送请求到后端请求数据
    this.request.get("/echarts/members").then(res => {
      if (res.state == 200) {
        //将后端得到的数据放入数组中
        // console.log(res)
        option.series[1].data = res.data.Y[0]
        option.series[0].data = res.data.Y[0]
        option.xAxis.data = res.data.X
        option.title.subtext = res.data.title
        this.totalUsers = res.data.totalUsers
        // console.log(option.subtext)
        //数据准备完毕后在set
        myChart.setOption(option);
      }

    })


    /*
    * 饼图
    * */
    var pieOption = {
      title: {
        text: '用户观看视频统计',
        subtext: '热度',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      color: [
          '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc','#79fc51',
          '#782e2f', '#df7229', '#4a2e78', '#2e3778', '#d239d7', '#4f782e','#921919',
          '#68f404', '#f21a3e', '#54782e', '#ee7373', '#2e786b', '#08f0ca'
      ],
      series: [
        {
          type: 'pie',
          radius: '70%',//饼图的半径大小
          data: [{value: 1048, name: 'Search'}, {value: 1048, name: 'Search Engine'}, {
            value: 1048,
            name: 'Search Engine'
          }],
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              textStyle: {
                align: 'center',
                baseline: 'middle',
                fontFamily: '微软雅黑',
                fontSize: 15,
                fontWeight: 'bolder',
                color: '#fff'
              }
            },
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    //对饼图初始化
    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);
    //发送请求到后端请求数据
    this.request.get("/echarts/videoHeat").then(res => {
      if (res.state == 200) {
        //将后端得到的数据放入数组中
        // console.log(res)
        //1.计算总数，得到观看历史的总数
        let sum = 0;
        for (let i = 0; i < res.data.data.length; i++) {
            sum += res.data.data[i]
        }
        //2.将有效数据（大于总数的5%）添加到数组v中
        let v = []
        let other = 0
        for (let i = 0; i < res.data.data.length; i++) {
          if (res.data.data[i] < sum*0.02){
            other += res.data.data[i];
            continue;
          }
          let vi = {
            value: res.data.data[i],
            name: res.data.itemName[i] + "专区",
          }
          v.push(vi)
        }
        //3.将小于总数的5%的数据命名为其他，添加到v数组中
        v.push({
          value: other,
          name: "其他专区",
        })
        // console.log("V =====>>>>"+v)
        //4.将数据添加到图表中
        pieOption.series[0].data = v
        this.dailyActivity = res.data.dailyActivity
        this.hotVideo = res.data.hotVideo

        //数据准备完毕后在set
        pieChart.setOption(pieOption)
      }

    })

  },

}
</script>


